<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>帖子详情 - 摄影爱好者论坛</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #FF3B30;
      --primary-light: #FFE5E5;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --border-light: #E5E6EB;
      --bg-white: #FFFFFF;
      --bg-light: #F2F3F5;
      --gray-100: #F7F8FA;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      padding-bottom: 80px;
      margin: 0;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--bg-white);
      padding: 15px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 20px;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    /* 帖子容器 */
    .post-container {
      background-color: var(--bg-white);
      margin-bottom: 10px;
    }
    
    /* 帖子头部 */
    .post-header {
      padding: 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
    }
    
    .author-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .author-info {
      flex: 1;
    }
    
    .author-name {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .author-badge {
      font-size: 10px;
      padding: 1px 5px;
      border-radius: 4px;
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .post-meta {
      font-size: 12px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .post-menu {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 18px;
    }
    
    /* 帖子内容 - 文字类型 */
    .post-content {
      padding: 16px;
    }
    
    .post-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 12px;
      line-height: 1.4;
    }
    
    .post-text {
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 16px;
    }
    
    /* 帖子内容 - 图片类型 */
    .post-images {
      margin: 12px 0 16px;
    }
    
    .single-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 8px;
    }
    
    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .grid-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
    
    /* 帖子内容 - 投票类型 */
    .poll-container {
      padding: 16px;
      border: 1px solid var(--border-light);
      border-radius: 8px;
      margin: 12px 0 16px;
    }
    
    .poll-option {
      padding: 12px 15px;
      border: 1px solid var(--border-light);
      border-radius: 6px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .poll-option.selected {
      border-color: var(--primary);
      background-color: var(--primary-light);
    }
    
    .option-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }
    
    .option-text {
      font-size: 15px;
    }
    
    .option-votes {
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .progress-bar {
      height: 6px;
      background-color: var(--border-light);
      border-radius: 3px;
      overflow: hidden;
    }
    
    .progress {
      height: 100%;
      background-color: var(--primary);
      border-radius: 3px;
    }
    
    .poll-stats {
      font-size: 13px;
      color: var(--text-secondary);
      text-align: right;
      margin-top: 10px;
    }
    
    /* 帖子标签与分类 */
    .post-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
    }
    
    .post-tag {
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 4px;
      background-color: var(--gray-100);
      color: var(--text-secondary);
    }
    
    .post-category {
      display: inline-block;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 4px;
      background-color: var(--primary-light);
      color: var(--primary);
      margin-right: 8px;
    }
    
    /* 帖子操作区 */
    .post-actions {
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      border-top: 1px solid var(--border-light);
      border-bottom: 1px solid var(--border-light);
    }
    
    .action-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 12px;
      gap: 5px;
      padding: 5px 10px;
    }
    
    .action-button.active {
      color: var(--primary);
    }
    
    .action-icon {
      font-size: 18px;
    }
    
    /* 评论区 */
    .comments-section {
      background-color: var(--bg-white);
      padding: 16px;
    }
    
    .comments-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .comments-title {
      font-size: 16px;
      font-weight: 600;
    }
    
    .comments-sort {
      font-size: 13px;
      color: var(--text-secondary);
      background: none;
      border: none;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    /* 评论输入框 */
    .comment-input-container {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .user-avatar-small {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .comment-input-wrapper {
      flex: 1;
      position: relative;
    }
    
    .comment-input {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid var(--border-light);
      border-radius: 20px;
      background-color: var(--gray-100);
      font-size: 14px;
      resize: none;
      height: 40px;
      overflow: hidden;
    }
    
    .comment-input:focus {
      outline: none;
      border-color: var(--primary);
      background-color: white;
    }
    
    .send-comment {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: var(--primary);
      font-size: 18px;
    }
    
    /* 评论列表 */
    .comments-list {
      margin-bottom: 20px;
    }
    
    .comment-item {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
    }
    
    .comment-content {
      flex: 1;
    }
    
    .comment-text {
      background-color: var(--gray-100);
      padding: 10px 14px;
      border-radius: 18px 18px 18px 0;
      font-size: 14px;
      margin-bottom: 5px;
    }
    
    .comment-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .comment-author {
      font-weight: 500;
      color: var(--text-primary);
    }
    
    .comment-actions {
      display: flex;
      gap: 12px;
    }
    
    .comment-action {
      color: var(--text-secondary);
      text-decoration: none;
    }
    
    .comment-action:hover {
      color: var(--primary);
    }
    
    /* 回复样式 */
    .replies-container {
      margin-left: 46px;
      margin-top: 10px;
    }
    
    .reply-item {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }
    
    .reply-text {
      background-color: var(--gray-100);
      padding: 8px 12px;
      border-radius: 14px 14px 14px 0;
      font-size: 13px;
      margin-bottom: 5px;
    }
    
    .reply-to {
      color: var(--primary);
      font-weight: 500;
    }
    
    /* 底部操作栏 */
    .bottom-action-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 100;
    }
    
    .bottom-input {
      flex: 1;
      padding: 10px 15px;
      border: 1px solid var(--border-light);
      border-radius: 20px;
      background-color: var(--gray-100);
      font-size: 14px;
    }
    
    .bottom-action {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: var(--gray-100);
      border: none;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .emoji-btn {
      font-size: 18px;
    }
    
    .send-btn {
      background-color: var(--primary);
      color: white;
    }
    
    /* 加载更多 */
    .load-more {
      width: 100%;
      padding: 10px;
      background-color: var(--gray-100);
      border: 1px solid var(--border-light);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 14px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="page-header">
    <button class="header-btn" id="backBtn">
      <i class="fa fa-arrow-left"></i>
    </button>
    <div class="header-title">帖子详情</div>
    <button class="header-btn">
      <i class="fa fa-share-alt"></i>
    </button>
  </div>
  
  <!-- 帖子容器 -->
  <div class="post-container">
    <!-- 帖子头部 -->
    <div class="post-header">
      <img src="https://picsum.photos/100/100?random=1" alt="作者头像" class="author-avatar">
      <div class="author-info">
        <div class="author-name">
          摄影发烧友
          <span class="author-badge">资深会员</span>
        </div>
        <div class="post-meta">
          <span>2小时前</span>
          <span>·</span>
          <span>摄影技巧</span>
        </div>
      </div>
      <button class="post-menu">
        <i class="fa fa-ellipsis-h"></i>
      </button>
    </div>
    
    <!-- 帖子内容 - 文字+图片混合类型 -->
    <div class="post-content">
      <h1 class="post-title">新手必看：如何正确设置相机参数拍出清晰夜景？</h1>
      
      <div class="post-text">
        很多新手在拍摄夜景时都会遇到画面模糊、噪点过多或者曝光不足的问题。根据我的经验，总结了几个关键参数设置技巧，帮助大家拍出清晰的夜景照片：
      </div>
      
      <div class="post-text">
        <strong>1. 光圈设置</strong><br>
        夜景拍摄建议使用较小的光圈（f/8至f/16之间），这样可以获得更大的景深，同时让夜景中的灯光呈现出星芒效果。
      </div>
      
      <div class="post-images">
        <img src="https://picsum.photos/600/400?random=10" alt="夜景摄影示例" class="single-image">
      </div>
      
      <div class="post-text">
        <strong>2. 快门速度</strong><br>
        根据光线条件调整，一般在1-30秒之间。使用三脚架可以避免手抖导致的模糊，必要时可以使用快门线或定时拍摄功能。
      </div>
      
      <div class="post-images">
        <div class="image-grid">
          <img src="https://picsum.photos/300/300?random=11" alt="摄影技巧" class="grid-image">
          <img src="https://picsum.photos/300/300?random=12" alt="摄影技巧" class="grid-image">
          <img src="https://picsum.photos/300/300?random=13" alt="摄影技巧" class="grid-image">
        </div>
      </div>
      
      <div class="post-text">
        <strong>3. ISO设置</strong><br>
        尽量使用低ISO（100-400）以减少噪点，保持画面纯净。如果光线太暗，可以适当提高，但建议不超过1600。
      </div>
      
      <div class="post-tags">
        <span class="post-category">技巧分享</span>
        <span class="post-tag">夜景摄影</span>
        <span class="post-tag">相机参数</span>
        <span class="post-tag">新手教程</span>
      </div>
    </div>
    
    <!-- 帖子操作区 -->
    <div class="post-actions">
      <button class="action-button active">
        <i class="fa fa-thumbs-up action-icon"></i>
        <span>128</span>
      </button>
      <button class="action-button">
        <i class="fa fa-comment-o action-icon"></i>
        <span>42</span>
      </button>
      <button class="action-button">
        <i class="fa fa-bookmark-o action-icon"></i>
        <span>收藏</span>
      </button>
      <button class="action-button">
        <i class="fa fa-share-alt action-icon"></i>
        <span>分享</span>
      </button>
    </div>
  </div>
  
  <!-- 评论区 -->
  <div class="comments-section">
    <div class="comments-header">
      <h2 class="comments-title">评论 (42)</h2>
      <button class="comments-sort">
        <span>最新</span>
        <i class="fa fa-chevron-down"></i>
      </button>
    </div>
    
    <!-- 评论输入框 -->
    <div class="comment-input-container">
      <img src="https://picsum.photos/100/100?random=20" alt="用户头像" class="user-avatar-small">
      <div class="comment-input-wrapper">
        <textarea class="comment-input" placeholder="写下你的评论..."></textarea>
        <button class="send-comment">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
    
    <!-- 评论列表 -->
    <div class="comments-list">
      <!-- 评论1 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=21" alt="评论者头像" class="user-avatar-small">
        <div class="comment-content">
          <div class="comment-text">
            非常实用的技巧！我一直不知道夜景要调小光圈，难怪拍不出星芒效果，下次一定试试。
          </div>
          <div class="comment-meta">
            <span class="comment-author">摄影新手</span>
            <span>1小时前</span>
            <div class="comment-actions">
              <a href="#" class="comment-action">回复</a>
              <a href="#" class="comment-action">点赞 (15)</a>
            </div>
          </div>
          
          <!-- 评论1的回复 -->
          <div class="replies-container">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=1" alt="回复者头像" class="user-avatar-small">
              <div class="comment-content">
                <div class="reply-text">
                  <span class="reply-to">@摄影新手</span> 不客气，记得使用三脚架效果会更好哦！
                </div>
                <div class="comment-meta">
                  <span class="comment-author">摄影发烧友</span>
                  <span>45分钟前</span>
                  <div class="comment-actions">
                    <a href="#" class="comment-action">回复</a>
                    <a href="#" class="comment-action">点赞 (5)</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 评论2 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=22" alt="评论者头像" class="user-avatar-small">
        <div class="comment-content">
          <div class="comment-text">
            对于没有三脚架的情况，有什么替代方案吗？我经常出去旅行，带三脚架太不方便了。
          </div>
          <div class="comment-meta">
            <span class="comment-author">旅行摄影师</span>
            <span>2小时前</span>
            <div class="comment-actions">
              <a href="#" class="comment-action">回复</a>
              <a href="#" class="comment-action">点赞 (8)</a>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 评论3 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=23" alt="评论者头像" class="user-avatar-small">
        <div class="comment-content">
          <div class="comment-text">
            请问楼主用的是什么相机和镜头拍摄的这些示例照片？效果非常好！
          </div>
          <div class="comment-meta">
            <span class="comment-author">器材控</span>
            <span>2小时前</span>
            <div class="comment-actions">
              <a href="#" class="comment-action">回复</a>
              <a href="#" class="comment-action">点赞 (12)</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载更多评论 -->
    <button class="load-more">
      加载更多评论
    </button>
  </div>
  
  <!-- 底部快捷评论栏 -->
  <div class="bottom-action-bar">
    <button class="bottom-action emoji-btn">
      <i class="fa fa-smile-o"></i>
    </button>
    <input type="text" class="bottom-input" placeholder="写评论...">
    <button class="bottom-action send-btn">
      <i class="fa fa-paper-plane"></i>
    </button>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 返回按钮
    document.getElementById('backBtn').addEventListener('click', function() {
      history.back();
    });
    
    // 帖子操作按钮交互
    document.querySelectorAll('.action-button').forEach(btn => {
      btn.addEventListener('click', function() {
        // 点赞按钮逻辑
        if (this.querySelector('.fa-thumbs-up') || this.querySelector('.fa-thumbs-o-up')) {
          this.classList.toggle('active');
          const countElem = this.querySelector('span');
          let count = parseInt(countElem.textContent);
          
          if (this.classList.contains('active')) {
            this.innerHTML = '<i class="fa fa-thumbs-up action-icon"></i><span>' + (count + 1) + '</span>';
          } else {
            this.innerHTML = '<i class="fa fa-thumbs-o-up action-icon"></i><span>' + (count - 1) + '</span>';
          }
        } 
        // 收藏按钮逻辑
        else if (this.querySelector('.fa-bookmark-o') || this.querySelector('.fa-bookmark')) {
          this.classList.toggle('active');
          if (this.classList.contains('active')) {
            this.innerHTML = '<i class="fa fa-bookmark action-icon"></i><span>已收藏</span>';
          } else {
            this.innerHTML = '<i class="fa fa-bookmark-o action-icon"></i><span>收藏</span>';
          }
        }
        // 分享按钮
        else if (this.querySelector('.fa-share-alt')) {
          alert('分享功能：可分享到微信、微博、QQ等');
        }
        // 评论按钮
        else if (this.querySelector('.fa-comment-o')) {
          document.querySelector('.bottom-input').focus();
        }
      });
    });
    
    // 评论排序切换
    document.querySelector('.comments-sort').addEventListener('click', function() {
      const sortText = this.querySelector('span');
      if (sortText.textContent === '最新') {
        sortText.textContent = '最热';
      } else {
        sortText.textContent = '最新';
      }
    });
    
    // 评论输入框自动调整高度
    const commentInput = document.querySelector('.comment-input');
    commentInput.addEventListener('input', function() {
      this.style.height = 'auto';
      // 限制最大高度
      if (this.scrollHeight > 100) {
        this.style.height = '100px';
        this.style.overflowY = 'auto';
      } else {
        this.style.height = this.scrollHeight + 'px';
        this.style.overflowY = 'hidden';
      }
    });
    
    // 发送评论
    document.querySelector('.send-comment').addEventListener('click', function() {
      sendComment();
    });
    
    document.querySelector('.bottom-input').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        sendComment();
      }
    });
    
    document.querySelector('.send-btn').addEventListener('click', function() {
      sendComment();
    });
    
    // 发送评论函数
    function sendComment() {
      const inputElem = document.querySelector('.comment-input').value.trim() || 
                       document.querySelector('.bottom-input').value.trim();
      
      if (inputElem) {
        alert('评论已发送：' + inputElem);
        document.querySelector('.comment-input').value = '';
        document.querySelector('.comment-input').style.height = '40px';
        document.querySelector('.bottom-input').value = '';
      }
    }
    
    // 评论点赞
    document.querySelectorAll('.comment-action').forEach(action => {
      if (action.textContent.includes('点赞')) {
        action.addEventListener('click', function(e) {
          e.preventDefault();
          let countText = this.textContent.match(/\d+/)[0];
          let count = parseInt(countText);
          this.textContent = '点赞 (' + (count + 1) + ')';
          this.style.color = 'var(--primary)';
        });
      }
      // 回复功能
      else if (action.textContent === '回复') {
        action.addEventListener('click', function(e) {
          e.preventDefault();
          const authorName = this.closest('.comment-meta').querySelector('.comment-author').textContent;
          document.querySelector('.bottom-input').value = '@' + authorName + ' ';
          document.querySelector('.bottom-input').focus();
        });
      }
    });
    
    // 加载更多评论
    document.querySelector('.load-more').addEventListener('click', function() {
      this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      // 模拟加载延迟
      setTimeout(() => {
        this.textContent = '没有更多评论了';
        this.disabled = true;
        this.style.opacity = '0.7';
      }, 1500);
    });
  </script>
</body>
</html>
